<template>
  <div class="app-container">
    <!-- 查询及添加 -->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label = "类型:" style = "width:300px">
        <el-select v-model = "formData.goodsType" placeholder = "请选择类型">
          <el-option
              v-for = "dict in quality_inspection_type"
              :label = "dict.label"
              :value = "dict.value"
              :key = "dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label = "状态:" style = "width:300px">
        <el-select v-model = "formData.warehouseInStatus" placeholder = "请选择状态">
          <el-option
              v-for = "dict in warehouse_in_type"
              :label = "dict.label"
              :value = "dict.value"
              :key = "dict.value"
          />
<!--          <el-option :label = "goodsType === 0 ? '待检' : '已检'" :value="goodsType" v-for="goodsType in [0,1]"/>-->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :loading="loading" :data="tableData">
<!--      <el-table-column label="id" prop="warehouseIn.id" width="160" align="center"/>-->
      <el-table-column label="入库编号" prop="warehouseIn.warehouseInNo" width="250" align="center"/>
      <el-table-column label="入库类型" prop="warehouseIn.goodsType" width="160" align="center">
        <template v-slot="scope">
          <dict-tag :options="warehouse_in_store_type" :value="scope.row.goodsType"/>
<!--          <el-tag v-if="scope.row.warehouseIn.goodsType === 1">采购入库</el-tag>
          <el-tag v-else-if="scope.row.warehouseIn.goodsType === 2">生产入库</el-tag>-->
        </template>
      </el-table-column>
      <el-table-column label="质检人" align="center" prop="userName" />
      <el-table-column label="质检时间" align="center" prop="qualityInspectionTime" width="180"/>
      <el-table-column label="质检类型" prop="qualityInspectionType" width="160" align="center">
        <template v-slot="scope">
          <dict-tag :options="quality_inspection_type" :value="scope.row.qualityInspectionType"/>
<!--          <el-tag v-if="scope.row.qualityInspectionType === 0">采购入库检</el-tag>-->
<!--          <el-tag v-else-if="scope.row.qualityInspectionType === 1">生产入库检</el-tag>-->
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="warehouseIn.warehouseInStatus" width="160" align="center">
        <template v-slot="scope">
          <dict-tag :options="warehouse_in_type" :value="scope.row.warehouseInStatus"/>
<!--          <el-tag type="success" v-if="scope.row.warehouseIn.warehouseInStatus === 0">待检</el-tag>
          <el-tag type="warning" v-else-if="scope.row.warehouseIn.warehouseInStatus === 1">待入库</el-tag>-->
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template v-slot="scope">
          <el-link
              :underline="false"
              icon="el-icon-edit"
              @click="handleQuality(scope.row)"
              v-hasPermi="['quality:inspection:edit']"
          >质检</el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="formData.pageNum"
        :limit.sync="formData.pageSize"
        @pagination="getList"
    />

    <WarehouseIn v-if="addDialog" v-model:addDialog="addDialog" :title="title" :a="a" @loadTableData="getList" :warehouseInId="warehouseInId" :sourceNo="sourceNo" :goodsType="goodsType"/>
  </div>
</template>

<script setup>
  import {warehouseInList} from "@/api/quality/quality.js";
  import WarehouseIn from "@/views/quality/WarehousingInspection/WarehouseIn.vue";

  const { proxy } = getCurrentInstance();
  const { quality_inspection_type,warehouse_in_store_type,warehouse_in_type,quality_inspection_status } = proxy.useDict("quality_inspection_type","warehouse_in_store_type","warehouse_in_type","quality_inspection_status")

  // 遮罩层
  let loading = ref(true)

  let title = ref()
  let a = ref()

  // 总条数
  const total = ref(0)
  // 质检表格数据
  let tableData = ref([])
  // 查询参数
  let formData = reactive({
    pageNum: 1,
    pageSize: 10,
    goodsType: null,
    warehouseInStatus: null
  })

  function getList() {
    loading.value = true
    warehouseInList(formData).then(response => {
      console.log(response.rows)
      tableData = response.rows
      total.value = response.total
      loading.value = false
    });
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    formData.pageNum = 1
    getList()
  }
  /** 重置按钮操作 */
  function resetQuery() {
    formData.goodsType = null
    formData.warehouseInStatus = null
    getList();
  }

  let addDialog = ref(false)
  let warehouseInId = ref()
  let sourceNo = ref()
  let goodsType = ref()
  function handleQuality(row){
    console.log(tableData)
    if (row.goodsType===1) {
      title.value = "采购入库"
      a.value = "物料"
    }else if(row.goodsType===2){
      title.value = "生产入库"
      a.value = "产品"
    }

    warehouseInId.value = row.warehouseIn.id
    sourceNo.value = row.warehouseIn.sourceNo
    goodsType.value = row.warehouseIn.goodsType
    addDialog.value = true
  }

  getList()
</script>

<style scoped lang="scss">

</style>